<template>
    <div>
        <el-input placeholder="科室编号" class="add" size="medium" v-model="Seach.selectByID" @clear="seach" clearable>
        </el-input>
        <el-input placeholder="科室编码" class="add" size="medium" v-model="Seach.selectByDeptCode" @clear="seach" clearable>
        </el-input>
        <el-input placeholder="科室名称" class="add" size="medium" v-model="Seach.selectByDeptName" @clear="seach" clearable>
        </el-input>
        <div class="btnBox">
            <el-button type="primary" @click="seach"> <i class="el-icon-search"></i>搜索科室</el-button>
            <el-button type="primary" @click="addDepartment"><i class="el-icon-edit"></i>新增科室</el-button>
            <download-excel class="export-excel-wrapper" :data="tableData" :fields="tableData.ID" type="xlsx"
                worksheet="科室信息" name="科室信息Excel">
                <el-button type="primary"><i class="el-icon-download"></i>导出科室</el-button>
            </download-excel>

            <el-button type="danger" @click="deleteDepartments"><i class="el-icon-download"></i>批量删除</el-button>
        </div>

        <div class="tablebox">
            <el-table :data="tableData" style="width: 100%" max-height="100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column fixed prop="id" label="科室编号" width="120">
                </el-table-column>
                <el-table-column fixed prop="deptCode" label="科室编码" width="120">
                </el-table-column>
                <el-table-column prop="deptName" label="科室名称" width="200">
                </el-table-column>
                <el-table-column prop="deptCategoryID" label="科室分类" width="250">
                </el-table-column>
                <el-table-column prop="deptType" label="科室类别" width="120">
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="changeDept(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="deleteDepartments(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize"
                    layout="total, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>



        <!-- Form -->
        <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="科室编码" :label-width="formLabelWidth">
                    <el-input v-model="form.deptCode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="科室名称" :label-width="formLabelWidth">
                    <el-input v-model="form.deptName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="科室分类" :label-width="formLabelWidth">
                    <el-input v-model="form.deptCategoryID" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="科室类别" :label-width="formLabelWidth">
                    <el-input v-model="form.deptType" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="changeDeptById() ">确 定</el-button>
            </div>
        </el-dialog>
     
    </div>
</template>

<script>
import { getListFun,updateFun, deleteByIdsFun, getListMoreFun } from '@/CommonJs/RequestApi';
export default {
    name: "Department",
    data() {
        return {
            tableData: [{
                ID: '',
                deptCode: '',
                deptName: '',
                deptCategoryID: '',
                deptType: ''
            }],
            form: {
                id: '',
                deptCode: '',
                deptName: '',
                deptCategoryID: '',
                deptType: ''
            },
            dialogTableVisible: false,
            dialogFormVisible: false,
            selectListId: [],
            pageNum: 0,
            pageSize: 8,
            keywords: '',
            currentPage: 0,
            total: 0,
            Seach: {
                selectByID: '',
                selectByDeptCode: '',
                selectByDeptName: ''
            },
            formLabelWidth: '120px'

        }
    }, methods: {
        handleCurrentChange(val) {
            this.currentPage = val;
            getListFun('department/get_dept', { pageNum: (this.currentPage - 1) * this.pageSize, pageSize: this.pageSize, keywords: '' }).then((response) => {
                // console.log(response)
                this.tableData = response.data.data
                this.total = response.data.count
            })
        },
        deleteDepartments(row) {
            this.selectListId.push(row.id)
            deleteByIdsFun('department/delete_dept_more', this.selectListId).then(response => {
                location.reload();
            })
        },
        changeDeptById(){
            this.dialogFormVisible = false
            updateFun('department/update_dept',this.form).then(response=>{
                // location.reload()
                this.$message({
                    message:'修改成功',
                    type: 'success'
                })
            })
        },
        handleSelectionChange(val) {
            this.selectListId.push(val[val.length - 1].id);
            console.log(this.selectListId)
            //循环添加数组中最后一个的id给新数组
        },
        seach() {
            getListMoreFun('department/get_dept_more', { pageNum: (this.currentPage - 1) * this.pageSize, pageSize: this.pageSize, keywords: this.Seach.selectByDeptCode, keywords02: this.Seach.selectByDeptName, keywords03: this.Seach.selectByID }).then(response => {
                this.tableData = response.data.data
                this.total = response.data.count
            })
        },
        addDepartment() {
            this.$router.push('/AddDepartment');
        },
        changeDept(val) {
            this.form = val
            console.log(val)
            this.dialogFormVisible = true;
        }
    }, mounted() {
        getListFun('department/get_dept', { pageNum: this.pageNum, pageSize: this.pageSize, keywords: '' }).then(response => {
            this.tableData = response.data.data
            this.total = response.data.count
        })
    }

}
</script>



<style scoped>
.add {
    width: 140px;
    margin-right: 5px;
}

.btnBox {
    display: inline-block;
    margin-left: 15px;
}

.btnBox button {
    margin-left: 3px;
}

.export-excel-wrapper {
    display: inline;
}
</style>